<template>
  <div style="background:#f3f3f3;">
    <!-- <div class="header_div" style="font-size:18px">
      <router-link to slot="left">
        <mt-button icon="back" style="font-size:15px">返回</mt-button>
    </router-link>
    </div>-->
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button
          class="mint-button mint-button--default mint-button--normal"
          style="font-size: 15px;"
          @click="option"
        >
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">个人信息</h1>
      <div class="mint-header-button is-right" />
    </header>
    <!-- <div style="height:40px" /> -->
    <div class="info-title">基本信息</div>
    <div class="bg-con">
      <mt-cell :value="myinfodata.username" title="姓名" />
      <mt-cell :value="myinfodata.sex" title="性别" />
      <mt-cell :value="myinfodata.idnumber" title="身份证号" />
      <mt-cell :value="myinfodata.address" title="联系地址" />
      <mt-cell :value="myinfodata.telephone" title="联系方式" />
      <mt-cell :value="myinfodata.appearance" title="政治面貌" />
    </div>
    <div class="info-title">员工信息</div>
    <div class="bg-con">
      <!-- <mt-cell title="人员状态" value="在职人员"></mt-cell> -->
      <mt-cell :value="myinfodata.userid" title="人员编号" />
      <mt-cell :value="myinfodata.occupationname" title="岗位" />
      <!-- <mt-cell title="职务" :value="myinfodata.positional"></mt-cell> -->
      <mt-cell :value="myinfodata.deptname" title="所在部门" />
      <mt-cell :value="myinfodata.tec_titlename" title="技术职称" />
      <mt-cell :value="myinfodata.entry_time" title="入职时间" />
    </div>
    <div class="info-title">身份证</div>
    <div v-if="myinfodata.idcardpic" class="bg-con">
      <div class="img_id">
        <img :src="myinfodata.idcardpic" alt @click="checkimg2()" />
        <!-- <img src="../static/head.png" alt /> -->
      </div>
    </div>
    <div
      v-else
      class="bg-con"
      style="line-height:40px;text-align:center;min-height:40px;color:#ccc"
    >暂无数据</div>
    <div class="info-title">劳动合同</div>
    <div class="bg-con">
      <!-- <mt-cell title="人员状态" value="在职人员"></mt-cell> -->
      <mt-cell :value="laborlist.username" title="人员姓名" />
      <mt-cell :value="laborlist.cnumber" title="合同号" />
      <!-- <mt-cell title="职务" :value="myinfodata.positional"></mt-cell> -->
      <mt-cell :value="laborlist.code" title="合同类型" />
      <mt-cell :value="laborlist.begintime" title="开始时间" />
      <mt-cell :value="laborlist.endtime" title="结束时间" />
      <mt-cell title="附件">
        <span style="display:inline-block;color:#409eff" @click="labor(laborlist,1)">查 看</span>
      </mt-cell>
    </div>
    <div class="info-title">学历信息</div>

    <div v-if="myinfodata.first_education">
      <div class="xuli_div">
        <span class="xuli_span">先学历</span>
      </div>
      <div class="bg-con">
        <mt-cell :value="myinfodata.first_educationname" title="学历" />
        <mt-cell :value="myinfodata.first_gradutetime" title="毕业时间" />
        <mt-cell :value="myinfodata.first_school" title="毕业院校" />
        <mt-cell :value="myinfodata.first_major" title="专业" />
      </div>
      <div class="xuli_div">
        <span class="xuli_span">后学历</span>
      </div>
      <div class="bg-con">
        <mt-cell :value="myinfodata.last_education" title="学历" />
        <mt-cell :value="myinfodata.last_gradutetime" title="毕业时间" />
        <mt-cell :value="myinfodata.last_school" title="毕业院校" />
        <mt-cell :value="myinfodata.last_major" title="专业" />
      </div>
    </div>
    <div
      v-else
      class="bg-con"
      style="line-height:40px;text-align:center;min-height:40px;color:#ccc"
    >暂无数据</div>
    <!-- 多条可循环的再for循环 -->
    <div class="info-title">技术职称</div>
    <div v-if="jishudata.length>0">
      <div
        v-for="(item, index) in jishudata"
        :key="index"
        class="bg-con"
        style="margin:0px auto 10px"
      >
        <mt-cell :value="item.hash.qualifyname2" title="资格名称" />
        <mt-cell :value="item.hash.grantime" title="授予时间" />
        <mt-cell :value="item.hash.cernum" title="证书编号" />
        <mt-cell :value="item.hash.tec_type" title="专业技术系列" />
        <mt-cell :value="item.hash.tec_name" title="专业名称" />
        <mt-cell title="证书附件">
          <span style="display:inline-block;color:#409eff" @click="checimg(item,1)">查 看</span>
        </mt-cell>
      </div>
    </div>
    <div class="info-title">职业资格</div>
    <div v-if="zhiyezige.length>0">
      <div
        v-for="(item, index) in zhiyezige"
        :key="index"
        class="bg-con"
        style="margin:0px auto 10px"
      >
        <mt-cell :value="item.hash.username" title="人员姓名" />
        <mt-cell :value="item.hash.majortype" title="证书名称" />
        <mt-cell :value="item.hash.cernum" title="证书编号" />
        <mt-cell :value="item.hash.majortype" title="专业类别" />
        <mt-cell :value="item.hash.grantime" title="资格时间" />
        <mt-cell :value="item.hash.validtime" title="截止时间" />
        <mt-cell title="附件">
          <span style="display:inline-block;color:#409eff" @click="checimg(item,3)">查 看</span>
        </mt-cell>
      </div>
    </div>
    <div
      v-else
      class="bg-con"
      style="margin:0px auto 10px;text-align: center;line-height: 40px;color:#ccc"
    >暂无数据</div>
    <div class="info-title">上岗证</div>
    <div v-if="sgdata.length>0">
      <div v-for="(item, index) in sgdata" :key="index" class="bg-con">
        <mt-cell :value="item.hash.cardnum" title="证书编号" />
        <mt-cell :value="item.hash.icnum" title="IC卡号" />
        <mt-cell :value="item.hash.occupation_type_name" title="职业领域" />
        <mt-cell :value="item.hash.position_type_name" title="岗位资格" />
        <mt-cell title="附件">
          <span style="display:inline-block;color:#409eff" @click="sgdataimage(item,1)">查 看</span>
        </mt-cell>
      </div>
    </div>
    <div
      v-else
      class="bg-con"
      style="margin:0px auto 10px;text-align: center;line-height: 40px;color:#ccc"
    >暂无数据</div>
    <div class="info-title">
      <span>个人业绩</span>
      <span style="display:inline-block;float:right;color:#26a2ff" @click="addinfo">+添加</span>
    </div>
    <div v-if="personaldata.length>0">
      <div v-for="(item, index) in personaldata" :key="index" class="bg-con">
        <mt-cell :value="item.hash.grantime" title="获奖时间" />
        <mt-cell :value="item.hash.content" title="获奖内容" />
        <mt-cell title="获奖图片">
          <span style="display:inline-block;color:#409eff" @click="checimg(item,2)">查 看</span>
        </mt-cell>
      </div>
    </div>
    <div
      v-else
      class="bg-con"
      style="margin:0px auto 10px;text-align: center;line-height: 40px;color:#ccc"
    >暂无数据</div>
    <div style="height:1px;background:#ccc" />
    <mt-popup v-model="popupVisible1" popup-transition="popup-fade" style="width:80%">
      <div v-if="imgsrc.length>0">
        <img :src="imgsrc[0].hash.fileurl" alt style="width:100%" @click="popupVisible1=false" />
      </div>
      <div v-else style="text-align: center;
    line-height: 40px;">暂无数据</div>
    </mt-popup>
    <mt-popup v-model="popupVisible5" popup-transition="popup-fade" style="width:80%">
      <div v-if="myinfodata.idcardpic">
        <img :src="myinfodata.idcardpic" alt style="width:100%" @click="picclose" />
      </div>
      <div v-else style="text-align: center;
    line-height: 40px;">暂无数据</div>
    </mt-popup>

    <mt-popup v-model="popupVisible6" popup-transition="popup-fade" style="width:80%">
      <div v-if="flinklist.fileurl">
        <img :src="flinklist.fileurl" alt style="width:100%" @click="popupVisible6=false" />
      </div>
      <div v-else style="text-align: center;
    line-height: 40px;">暂无数据</div>
    </mt-popup>

    <mt-popup v-model="popupVisible7" popup-transition="popup-fade" style="width:80%">
      <div v-if="flinklist.fileurl">
        <img :src="flinklist.fileurl" alt style="width:100%" @click="popupVisible7=false" />
      </div>
      <div v-else style="text-align: center;
    line-height: 40px;">暂无数据</div>
    </mt-popup>
    <!-- <div style="display:grid;  grid-template-columns:70% 30%;
  grid-template-rows: 100px 100px 100px;text-align:center;grid-row-gap: 20px;
  grid-column-gap: 20px;">
     <span v-for="(item, index) in ceshi" :key="index" style="background:#ccc;border-top:1px solid #bbb;border-left:1px solid #bbb">{{index}}</span>
    </div>-->
  </div>
</template>

<script>
import uploadpic from '~/components/uploadpic.vue'
export default {
  layout: 'default2',
  components: {
    uploadpic
  },
  data() {
    return {
      userName: '',
      ceshi: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      dateVal: '',
      popupVisible5: false,
      popupVisible: false,
      popupVisible1: false,
      popupVisible7: false,
      ts: this.newStore(),
      myinfodata: {},
      jishudata: [],
      imgsrc: [],
      sgdata: [],
      personaldata: [],
      zhiyezige: [],
      id: '',
      content: '',
      grantime: '请选择获奖时间',
      laborlist: {},
      flinklist: {},
      popupVisible6: false
    }
  },
  created() {
    this.getinfo1()
    this.getjishuinfo()
    this.getsginfo()
    this.getpersonalinfo()
    this.laborData()
    this.zhiyezigssse()
  },
  methods: {
    checkimg2() {
      this.popupVisible5 = true
    },
    checimg(item, val) {
      if (val == 1) {
        const req = {
          handle: '0E56125B90D2898ACAD2C3968249185CCD3A43E9777C4E90',
          filetype: 'technology',
          mainid: item.hash.id
        }
        this.spost(this.ts, '/mainservlet', req).then(ts => {
          if (ts.d.sflag == 'success') {
            this.imgsrc = ts.d.data.operation1
          }
        })
      } else if (val == 2) {
        const req = {
          handle: '0E56125B90D2898ACAD2C3968249185CCD3A43E9777C4E90',
          filetype: 'achieve',
          mainid: item.hash.id
        }
        this.spost(this.ts, '/mainservlet', req).then(ts => {
          if (ts.d.sflag == 'success') {
            this.imgsrc = ts.d.data.operation1
          }
        })
      } else if (val == 3) {
        const req = {
          handle: '0E56125B90D2898ACAD2C3968249185CCD3A43E9777C4E90',
          filetype: 'qualify',
          mainid: item.hash.id
        }
        this.spost(this.ts, '/mainservlet', req).then(ts => {
          if (ts.d.sflag == 'success') {
            this.imgsrc = ts.d.data.operation1
          }
        })
      }

      this.popupVisible1 = true
    },
    gonuxt(val) {
      this.$router.push(val)
    },
    addinfo() {
      this.$router.push('/myinfodetail')
    },
    option() {
      this.$router.push({
        name: 'jbrhome',
        query: {
          name: ''
        }
      })
    },
    openPicker() {
      this.$refs.picker.open()
    },
    getinfo1() {
      const req = {
        handle:
          '33224548EFC2E94F97536D55316F44F2A06ED94DCB3C4375FD58B6E268D37EF8',
        pid: localStorage.getItem('pid')
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.myinfodata = ts.d.data.operation1[0].hash
        console.log(this.myinfodata)
      })
    },
    getjishuinfo() {
      const req = {
        handle:
          '1CB43CC1631B5D5B6D910BDD88FB08CC450715EB6255AFE3AA93D3E1306FF758',
        username: localStorage.getItem('username')
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.jishudata = ts.d.data.operation1
          console.log(this.jishudata, '09')
        }
      })
    },
    getsginfo() {
      const req = {
        handle:
          '1CB43CC1631B5D5B14CBF34BC23B86F231062A3F18BDCAFA39249CF3DA4DD76E44B455B1B2775577',
        username: localStorage.getItem('username')
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.sgdata = ts.d.data.operation1
          console.log(this.sgdata, 'this.sgdata')
        }
      })
    },
    getpersonalinfo() {
      const req = {
        handle:
          'D328E4C742B794043F60211ED98E8FE473936C62493B31D1F6486B1D96ED9F7E',
        //pid:localStorage.getItem('pid')
        username: localStorage.getItem('username')
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.personaldata = ts.d.data.operation1
        }
      })
    },
    //增加个人业绩
    addpersonal() {
      console.log(this.filename, 'w')

      const req = {
        handle:
          'D328E4C742B794043F60211ED98E8FE4808793608E16237590BB61AA9EBA850D',
        pid: localStorage.getItem('pid'),
        id: this.id,
        content: this.content,
        grantime: this.grantime,
        filename: this.filename
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.getpersonalinfo()
          this.$messagebox('提示', '提交成功')
          this.popupVisible = false
        }
      })
    },
    addtime() {
      this.$refs.picker.open()
    },
    laborData() {
      const req = {
        handle:
          '09D3B9E20F101E11DEFE3350091AFF9B724AECA2C1F5AF24BF35823F59EB452A',
        pid: localStorage.getItem('pid')
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.laborlist = ts.d.data.operation1[0].hash
          console.log(this.laborlist)
        }
      })
    },
    labor(item) {
      const req = {
        handle: '0E56125B90D2898ACAD2C3968249185CCD3A43E9777C4E90',
        filetype: 'contract',
        mainid: item.cnumber
      }
      console.log(item, 'item')
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        console.log(req, 'req')
        if (ts.d.sflag == 'success') {
          this.flinklist = ts.d.data.operation1[0].hash
          // console.log(ts.d.data, "0909");
          console.log(this.flinklist, 'this.flinklist')
        }
      })
      this.popupVisible6 = true
    },
    sgdataimage(item) {
      const req = {
        handle: '0E56125B90D2898ACAD2C3968249185CCD3A43E9777C4E90',
        filetype: 'positioncard',
        mainid: item.hash.id
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.flinklist = ts.d.data.operation1[0].hash
          console.log(this.flinklist, '0909')
          this.popupVisible7 = true
        }
      })
    },
    picclose() {
      this.popupVisible5 = false
    },
    zhiyezigssse() {
      const req = {
        handle:
          '1CB43CC1631B5D5B8DDD57687CDE4AC73F156CD5A96D26B9CD3A43E9777C4E90',
        pid: localStorage.getItem('pid'),
        start: 0,
        limit: 100000
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.zhiyezige = ts.d.data.operation1
          console.log(this.zhiyezige, '0909')
        }
      })
    }
  }
}
</script>
<style scoped>
.blockDiv {
  margin-top: 100px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: scroll;
}
.block {
  width: calc(calc(100% / 2) - 10px);
  margin: 5px;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
}
.info-title {
  padding: 10px;
  color: #ccc;
  font-size: 16px;
}
.bg-con {
  background: #fff;
  width: 95%;
  margin: 0 auto 5px;
}
.img_id img {
  width: 100%;
  margin: 10px 5px;
  text-align: center;
  box-sizing: border-box;
}
.mint-cell-wrapper {
  font-size: 14px;
}
.xuli_div {
  background: #fff;
  padding: 5px;
  font-size: 15px;
  width: 95%;
  margin: 0 auto;
}
.xuli_span {
  border-left: 3px solid #ccc;
  display: inline-block;
  padding-left: 5px;
}
.mint-field-core {
  text-align: right !important;
}
</style>
